<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>home</title>
</head>

<body>
    <!-- 主页整体html 复制此部分 -->
    <div class="home-box">
        <div class="home-row home-col-space15">
            <div class="home-col-xs3">
                <!-- 实时档案情况 -->
                <div class="home-show-box" style="height: 600px;">
                    <div class="home-show-title">实时档案情况</div>
                    <table class="home-show-table">
                        <thead>
                            <tr>
                                <th>区名称</th>
                                <th>养老服务<br>补贴人数</th>
                                <th>失能护理<br>补贴人数</th>
                                <th>高领<br>津贴人数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 17条数据 -->
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="home-show-table-more">
                        <a href="#">更多>></a>
                    </div>
                </div>
            </div>
            <div class="home-col-xs6">
                <!-- 2020年4月发放账单情况 -->
                <div class="home-show-box" style="height: 600px;">
                    <div class="home-show-title-center">2020年4月发放账单情况</div>
                    <div class="home-map-total">
                        <div class="home-map-block">
                            <div class="home-map-icon">
                                <img src="images/ico-home-map01.png" alt="">
                                <p>养老服务补贴</p>
                            </div>
                            <div class="home-map-text">
                                <h1>2321<span>人</span></h1>
                                <h1>257.00<span>万元</span></h1>
                            </div>
                        </div>
                        <div class="home-map-block">
                            <div class="home-map-icon">
                                <img src="images/ico-home-map02.png" alt="">
                                <p>失能护理补贴</p>
                            </div>
                            <div class="home-map-text">
                                <h1>2321<span>人</span></h1>
                                <h1>257.00<span>万元</span></h1>
                            </div>
                        </div>
                        <div class="home-map-block">
                            <div class="home-map-icon">
                                <img src="images/ico-home-map03.png" alt="">
                                <p>高龄津贴</p>
                            </div>
                            <div class="home-map-text">
                                <h1>2321<span>人</span></h1>
                                <h1>257.00<span>万元</span></h1>
                            </div>
                        </div>
                    </div>
                    <!-- 地图 -->
                    <div class="home-map">
                        预留地图位置，限高 460px
                    </div>
                </div>
            </div>
            <div class="home-col-xs3">
                <!-- 2020年5月资金发放进度情况 -->
                <div class="home-show-box" style="height: 600px;">
                    <div class="home-show-title">2020年5月资金发放进度情况</div>
                    <table class="home-show-table">
                        <thead>
                            <tr>
                                <th>区名称</th>
                                <th>进入状态</th>
                                <th>发放人数</th>
                                <th>发放金额<br>（万元）</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 17条数据 -->
                            <tr>
                                <td>东城区</td>
                                <td class="color-7bcef7">未确认</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td class="color-9edfff">待确认</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>已确认</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="home-show-table-more">
                        <a href="#">更多>></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-row home-col-space15">
            <div class="home-col-xs3">
                <!-- 实时档案持卡人情况 -->
                <div class="home-show-box">
                    <div class="home-show-title">档案持卡人人数情况</div>
                    <div id="echartsPro"></div>
                </div>
            </div>
            <div class="home-col-xs6">
                <!-- 年度资金发放人数和资金变化情况 -->
                <div class="home-show-box">
                    <div class="home-show-title">年度资金发放人数和资金变化情况</div>
                    <div class="home-show-sel">
                        <select name="" id="">
                            <option value="">2019年</option>
                        </select>
                    </div>
                    <div id="echartsLine"></div>
                </div>
            </div>
            <div class="home-col-xs3">
                <!-- 预警提示情况 -->
                <div class="home-show-box">
                    <div class="home-show-title">预警提示情况</div>
                    <div id="echartsRad"></div>
                </div>
            </div>
        </div>
        <div class="home-row home-col-space15">
            <div class="home-col-xs3">
                <!-- 高龄津贴老人档案年龄分布情况 -->
                <div class="home-show-box">
                    <div class="home-show-title">高龄津贴老人档案年龄分布情况</div>
                    <div id="echartsPie"></div>
                </div>
            </div>
            <div class="home-col-xs6">
                <!-- 失能护理补贴人员档案分布情况-->
                <div class="home-show-box">
                    <div class="home-show-title">失能护理补贴人员档案分布情况</div>
                    <div id="echartsBar"></div>
                </div>
            </div>
            <div class="home-col-xs3">
                <!-- 养老服务补贴人员档案分布情况 -->
                <div class="home-show-box">
                    <div class="home-show-title">养老服务补贴人员档案分布情况</div>
                    <div id="echartsPieSimble"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 主页整体html 复制此部分 -->
    <!-- echarts js 在线定制 只含有部分图表 -->
    <script src="echarts.min.js"></script>
    <script>
        // 档案持卡人人数情况 图表
        var echartsPro = echarts.init(document.getElementById("echartsPro"));
        echartsPro.setOption({
            // backgroundColor: '#0a1d53',
            grid: {
                left: '4%',
                top: '2%',
                right: '8%',
                bottom: '2%',
                containLabel: true
            },
            // tooltip: {
            //     trigger: 'item',
            //     axisPointer: {
            //         // 坐标轴指示器，坐标轴触发有效
            //         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            //     }
            // },
            // textStyle: {
            //     color: '#fff'
            // },
            xAxis: {
                show: false,
                type: 'value',
                // 设置x轴显示几段
                min: 0,
                max: 100,
                // inverse: true,
                splitLine: {
                    show: false
                },
                interval: 50
            },
            yAxis: {
                show: true,
                type: 'category',
                data: [
                    '养老\n助残卡',
                    '民政\n一卡通',
                    '残疾人\n一卡通',
                    '特殊家庭\n扶持卡',
                    '军人\n保障卡',
                    '第三代\n社保卡'
                ],
                axisTick: { show: false },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#999999'
                    }
                },
                splitLine: {
                    show: false
                },
                inside: true,
            },
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#fafafa', // 定义柱形的背景色
                            barBorderRadius: [20, 20, 20, 20] // 定义背景柱形的圆角
                        }
                    },
                    barGap: '-100%', // 设置柱形重合的重要步骤
                    data: [100, 100, 100, 100, 100, 100, 100],
                    z: 0,
                    silent: true,
                    animation: false, // 关闭动画效果
                    barWidth: '18px' // 设置柱形宽度
                },
                {
                    type: 'bar',
                    data: [50, 50, 50, 50, 50, 50, 50],
                    barWidth: '18px',
                    barGap: '-100%', // 设置柱形重合的重要步骤
                    label: {
                        normal: {
                            show: true, //是否显现，不显示的话设置成false
                            position: "right", //显示的位置
                            distance: 10, //距离侄子的值 // label要显示的值比如： 20%
                            offset: [0, 2],
                            formatter: function (param) {
                                return param.value;
                            },
                            textStyle: {
                                //这个地方颜色是支持回调函数的这种的，如果是一种颜色则可以写成： color :'#1089E7'
                                color: '#999999',
                                fontSize: "14"
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#a0d971',
                            barBorderRadius: [20, 20, 20, 20] // 定义柱形的圆角
                        }
                    }
                }
            ]
        });



        // 年度资金发放人数和资金变化情况 图表
        var echartsLine = echarts.init(document.getElementById("echartsLine"))
        echartsLine.setOption({
            color: ['#9de1fd', '#fec11c'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line',
                    label: {
                        show: true,
                        backgroundColor: '#656565',
                        borderRadius: 4,
                        shadowColor: '#fff',
                    },
                    lineStyle: {
                        color: '#dce2e8',
                        type: 'dashed'

                    }
                }
            },
            legend: {
                // icon:'diamond',
                right: 140,
                data: ['发放人数', '发放资金']
            },
            grid: {
                left: '4%',
                right: '5%',
                bottom: '8%',
                top: '12%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {					//---坐标轴 轴线
                        show: true,					//---是否显示
                        //------------------- 线 -------------------------
                        lineStyle: {
                            color: '#e5e5e5',
                            width: 1,
                            type: 'solid',
                        },
                    },
                    axisTick: {					//---坐标轴 刻度
                        show: false,
                    },
                    axisLabel: {					//---坐标轴 标签
                        show: true,					//---是否显示
                        // inside:false,				//---是否朝内
                        // rotate:0,					//---旋转角度	
                        margin: 10,					//---刻度标签与轴线之间的距离
                        color: '#999999',				//---默认取轴线的颜色
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {					//---坐标轴 轴线
                        show: false,
                    },
                    axisTick: {					//---坐标轴 刻度
                        show: false,
                    },
                    axisLabel: {					//---坐标轴 标签
                        // show:true,	
                        color: '#999999',				//---默认取轴线的颜色
                    },
                    splitLine: {					//---grid 区域中的分隔线
                        show: true,					//---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
                        lineStyle: {
                            color: '#e5e5e5',
                            width: 1,
                            type: 'solid',			//---类型
                        },
                    },
                }
            ],
            series: [
                {
                    name: '发放资金',
                    type: 'line',
                    stack: '总量',
                    // smooth: true,
                    symbolSize: 8,//拐点大小
                    areaStyle: {
                        color: {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(157,225,253,0.4)' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(157,225,253,0)' // 100% 处的颜色
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            // label: {
                            //     show: true
                            // },
                            // borderColor: 'red',  // 拐点边框颜色
                            lineStyle: {
                                width: 2,  // 设置线宽
                                type: 'solid'  //'dotted'虚线 'solid'实线
                            }
                        }
                    },
                    data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
                },
                {
                    name: '发放人数',
                    type: 'line',
                    symbolSize: 8,//拐点大小
                    // symbol:'circle',
                    areaStyle: {
                        color: {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(254,194,30,0.4)' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(254,194,30,0)' // 100% 处的颜色
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                    // smooth: true,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            // label: {
                            //     show: true
                            // },
                            // borderColor: 'red',  // 拐点边框颜色
                            lineStyle: {
                                width: 2,  // 设置线宽
                                type: 'solid'  //'dotted'虚线 'solid'实线
                            }
                        }
                    },
                    data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
                }
            ]
        })
        // 预警提示情况 图表
        var echartsRad = echarts.init(document.getElementById("echartsRad"))
        echartsRad.setOption({
            tooltip: {},
            radar: {
                center: ['50%', '45%'],
                radius: 90,
                splitNumber: 5, // 雷达图圈数设置
                name: {
                    textStyle: {
                        color: '#999999',
                        // backgroundColor: '#999',
                        // borderRadius: 3,
                        // padding: [3, 5]
                    }
                },
                // 设置雷达图中间射线的颜色
                axisLine: {
                    lineStyle: {
                        color: '#c4c4c4',
                    },
                },
                // splitArea: {
                //     show: true,
                //     areaStyle: {
                //         color: 'rgba(151,249,93,1)', // 图表背景的颜色
                //     },
                // },
                indicator: [
                    { name: '救助预警', max: 6500 },
                    { name: '身份预警', max: 16000 },
                    { name: '死亡预警', max: 30000 },
                    { name: '年龄预警', max: 38000 }
                ]
            },
            series: [{
                name: '预算 vs 开销（Budget vs spending）',
                type: 'radar',
                // symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
                symbolSize: 5, // 拐点的大小
                itemStyle: { // 单个拐点标志的样式设置。
                    normal: {
                        borderColor: 'rgba(151,249,93,1)',
                        // 拐点的描边颜色。[ default: '#000' ]
                        borderWidth: 2,
                        // 拐点的描边宽度，默认不描边。[ default: 0 ]
                    }
                },
                lineStyle: { // 单项线条样式。
                    normal: {
                        opacity: 0.5, // 图形透明度
                        color: 'rgba(151,249,93,1)'
                    }
                },
                areaStyle: { // 单项区域填充样式
                    normal: {
                        color: 'rgba(151,249,93,1)' // 填充的颜色。[ default: "#000" ]
                    }
                },
                data: [
                    {
                        value: [4300, 10000, 28000, 35000],
                        name: '预算分配（Allocated Budget）'
                    }
                ]
            }]
        })

        // 高龄津贴老人档案年龄分布情况 图表
        var echartsPie = echarts.init(document.getElementById("echartsPie"))
        echartsPie.setOption({
            // tooltip: {
            //     trigger: 'item',
            //     formatter: '{a} <br/>{b}: {c} ({d}%)'
            // },
            color: ['#fec11c', '#a0d971', '#9de1fd'],
            legend: {
                orient: 'horizontal',
                left: 'center',
                bottom: 15,
                itemWidth: 6,   // 设置图例图形的宽
                itemHeight: 42,  // 设置图例图形的高
                itemGap: 30,
                // data: ['直接访问', '邮件营销', '联盟广告']
                formatter: function (name) {
                    let data = [
                        { value: 335, name: '80-89岁' },
                        { value: 310, name: '90-99岁' },
                        { value: 234, name: '百岁以上老人' }
                    ]
                    let target;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].name === name) {
                            target = data[i].value
                        }
                    }
                    let arr = ["{a|" + target + "}{b|人}", "{b|" + name + "}"]
                    return arr.join("\n")
                },
                textStyle: {
                    rich: {
                        a: {
                            fontSize: 24,
                            fontWeight: 'bold',
                            color: "#070503",
                            padding: [6, 0, 0, 0]
                        },
                        b: {
                            fontSize: 12,
                            color: "#999999"
                        }
                    }
                }
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '60%'],
                    center: ['50%', '36%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        normal: {
                            borderWidth: 8,
                            borderColor: '#fff',
                        }
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            formatter: function (e) {
                                console.log(e.value)
                                return "{a|" + e.value + "}{b|人}"
                            },
                            textStyle: {
                                rich: {
                                    a: {
                                        fontSize: 28,
                                        fontWeight: 'bold',
                                        color: "#070503",
                                        padding: [6, 0, 0, 0],
                                        fontFamily: 'Microsoft YaHei'
                                    },
                                    b: {
                                        fontSize: 12,
                                        color: "#999999",
                                        fontFamily: 'Microsoft YaHei'
                                    }
                                }
                            }
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 335, name: '80-89岁' },
                        { value: 310, name: '90-99岁' },
                        { value: 234, name: '百岁以上老人' },
                    ]
                }
            ]
        })



        // 失能护理补贴人员档案分布情况	 图表
        var echartsBar = echarts.init(document.getElementById("echartsBar"))
        echartsBar.setOption({
            grid: {
                left: '4%',
                right: '4%',
                bottom: '8%',
                top: '12%',
                containLabel: true
            },
            xAxis: {
                axisLine: {					//---坐标轴 轴线
                    show: true,					//---是否显示
                    //------------------- 线 -------------------------
                    lineStyle: {
                        color: '#e5e5e5',
                        width: 1,
                        type: 'solid',
                    },
                },
                axisTick: {					//---坐标轴 刻度
                    show: false,
                },
                axisLabel: {					//---坐标轴 标签
                    show: true,					//---是否显示
                    // inside:false,				//---是否朝内
                    // rotate:0,					//---旋转角度	
                    margin: 10,					//---刻度标签与轴线之间的距离
                    color: '#999999',				//---默认取轴线的颜色
                },
                data: ['极重度失能', '重度残疾', '一二级听力言语 ']
            },
            yAxis: {
                type: 'value',
                axisLine: {					//---坐标轴 轴线
                    show: false,
                },
                axisTick: {					//---坐标轴 刻度
                    show: false,
                },
                axisLabel: {					//---坐标轴 标签
                    // show:true,	
                    color: '#999999',				//---默认取轴线的颜色
                },
                splitLine: {					//---grid 区域中的分隔线
                    show: true,					//---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
                    lineStyle: {
                        color: '#e5e5e5',
                        width: 1,
                        type: 'solid',			//---类型
                    },
                },

            },
            series: [{
                data: [120, 200, 150],
                type: 'bar',
                barWidth: '35',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(254, 193, 28, 0)'
                },
                label: {						//---图形上的文本标签
                    show: true,
                    position: 'outside',	//---相对位置
                    rotate: 0,				//---旋转角度
                    color: '#999999',
                    formatter: '总量：{c}'
                },
                itemStyle: {					//---图形形状
                    color: 'rgba(254, 193, 28, 1)',
                    // barBorderRadius: [18, 18, 0, 0],
                },
            }]
        })



        // 养老服务补贴人员档案分布情况 图表
        var echartsPieSimble = echarts.init(document.getElementById("echartsPieSimble"))
        echartsPieSimble.setOption({
            color: ['#9de1fd', '#a0d971', '#fec11c'],
            legend: {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                // y: 'bottom',
                bottom: 12,
                itemWidth: 7,   // 设置图例图形的宽
                itemHeight: 14,  // 设置图例图形的高
                textStyle: {
                    fontSize: 12,
                    color: '#999999'  // 图例文字颜色
                },
                // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                itemGap: 20,
                data: ['计生家庭', '低收入', '低保']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '66%',
                    center: ['50%', '40%'],
                    data: [
                        { value: 335, name: '计生家庭' },
                        { value: 310, name: '低收入' },
                        { value: 234, name: '低保' }
                    ],
                    itemStyle: {
                        normal: {
                            borderWidth: 10,
                            borderColor: '#fff',
                        },
                        // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                        // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                        // emphasis: {
                        //     shadowBlur: 15,
                        //     shadowOffsetX: 3,
                        //     shadowColor: 'rgba(30, 144, 255,0.3)'
                        // }
                    },
                    labelLine: {
                        normal: {
                            show: true,   // show设置线是否显示，默认为true，可选值：true ¦ false
                            lineStyle: {
                                color: '#787878'
                            },
                            // smooth: 0.2,
                            // length:80
                            length: 20,
                            length2: 20
                        }
                    },
                    label: {
                        color: "rgba(153,153,153,1)",
                        fontSize: 12,
                        formatter: '{b}\n({c})'
                    }
                }
            ]
        })
    </script>
</body>

</html>